.l_side .toc-wrapper{
  z-index: 1;
  overflow: hidden;
  border-radius: @border_radius;
  position: sticky;
  top: @height_navbar + @gap;
  .enable-trans();
  header{
    position: sticky;
    width: 100%;
    top: 0;
  }
  .content{
    padding: @gap/2 0 @gap 0;
    max-height: 500px;
    overflow: auto;
    &.pure{
      padding-top: 0; // 适合白色导航栏背景
    }
    a {
      border-left: 4px solid transparent;
      &:hover{
        color: fade(@color_text_main, 100%);
        border-left: 4px solid @theme_main;
      }
      &:active{
        border-left: 8px solid @theme_main;
      }
      &.active{
        color: fade(@color_text_main, 100%);
        border-left: 4px solid @theme_main;
        background: fade(@theme_main, 10%);
      }
    }
  }
  &.active{
    position: fixed;
    box-shadow: @boxshadow_card_raised;
    top: @height_navbar;
    header{
      .s-toc{
        transform: rotate(30deg);
      }
    }
    width: @width_sidebar;
    @media(max-width: @on_desktop) {
      width: @width_sidebar_m;
    }
    @media(max-width: @on_pad) {
      width: ~"calc(100% - 2 * @{gap})";
    }
  }
  .enable-trans();
  @media(max-width: @on_pad){
    position: fixed;
    max-height: 1000px;
    width: ~"calc(100% - 2 * @{gap})";
    top: @height_navbar;
    box-shadow: @boxshadow_card_raised;
    visibility: hidden;
    .rightBtn{
      display: none;
    }
    transform: scale(0,0);
    transform-origin: right top;
    &.active{
      visibility: visible;
      transform: scale(1,1);
    }
  }

  a {
    padding-left: 8px;
    color: fade(@color_text_main, 60%);
    font-size: @fontsize_small;
    display: inline-block;
  }
  ol{
    .toc-item.toc-level-1 {
      .toc-child a{
        padding-left: 0.8*@gap;
        font-weight: normal;
      }
    }
    .toc-item.toc-level-2 {
      .toc-child a{
        padding-left: 1.6*@gap;
        font-weight: normal;
      }
    }
    .toc-item.toc-level-3 {
      .toc-child a{
        padding-left: 2.4*@gap;
        font-weight: normal;
      }
    }
    .toc-item.toc-level-4 {
      .toc-child a{
        padding-left: 3.2*@gap;
        font-weight: normal;
      }
    }
    li{
      a{
        padding: 0 @gap/2 0 (@gap - 5px);
        font-weight: bold;
        width: 100%;

      }
      width: auto;
      text-align: left;
      // &:extend(.txt-ellipsis);
    }
  }
  &:empty{
    display:none;
  }
}
